<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能测试页面</title>
    <style>
        .progress-box {
            width: 100%;
            height: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 10px 0px;
            overflow: hidden;
        }
        /* 初始状态设置进度条宽度为0px */
        .progress-box > div {
            width: 12%;
            height: 100%;
            background-color: yellowgreen;
            transition: all .3s ease;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/spark-md5.js"></script>
    <link rel="stylesheet" href="css/webuploader.css">
    <script src="js/webuploader.js"></script>
</head>
<body style="text-align: center">
  <h1>功能测试页面</h1>
  <div>
    http://localhost:8080/ <input name="cmd" value=""/>
    <button>请求</button>
  </div>
  <div >
      <input type="file" id="fileSelector"/>
      <button type="submit" onclick="uploadFile()">上传</button>
      <button type="submit" onclick="uploadPause()">暂停</button>
      <div class="progress-box" id="progress"><div id="progressBar"></div></div>
  </div>
  <div>
      <form action="/disk/upload" method="post">
          <input type="file" name="file">
          <input type="submit" value="直接提交">
      </form>
  </div>
  <div style="width:80%;height:80vw;background-color:#fff3cd;margin:20px 0 0 10%">
      <div id="thelist" class="uploader-list"></div>
      <div style="margin: 20px 20px 20px 0;">
          <div type="file" id="picker" class="form-control-focus">选择文件</div>
          <button id="submitFile">提交</button>
      </div>
  </div>
</body>
<script type="text/javascript">
    var uploader = WebUploader.create({
        // swf文件路径
        swf : '/Uploader.swf',
        // 文件接收服务端。
        server : 'disk/webUpload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick : '#picker',
        threads:3,
        chunked: false,  //分片处理
        chunkSize: 15 * 1024, //每片15K
        threads:3,//上传并发数。允许同时最大上传进程数。
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize : false
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function(file) {
        //alert(123);

        uploader.md5File(file).then(function (md5) {
            console.log(md5);
            uploader.options.formData.guid = new Date().getTime()+'-'+file.name;
            uploader.options.formData.md5 = md5;
            uploader.options.formData.path = "/我的文件";
            $("#thelist").append(
                '<div id="' + file.id + '" class="item">'
                + '<h4 class="info">' + file.name + '</h4>'
                + '<p class="state">等待上传...</p>' + '</div>');
        })

    });

    uploader.on('uploadSuccess', function(file) {
        console.log(uploader.options.formData.guid);
        console.log(Math.ceil(file.size/(5*1024*1024)));
        console.log(file.name);
        $('#' + file.id).find('p.state').text('已上传');

    });

    // 上传出错处理
    uploader.on('uploadError', function (file) {
        // uploader.retry();
        console.log("失败",file)
    });
    uploader.on('uploadProgress', function (file,percentage ) {
        // uploader.retry();
        console.log(file.name,percentage)
    });

    // 暂停处理
    $("#stop").click(function(e){
        log("暂停上传...");
        uploader.stop(true);
    })

    // 从暂停文件继续
    $("#start").click(function(e){
        log("恢复上传...");
        uploader.upload();
    })

    function log(html) {
        $("#log").append("<div>"+html+"</div>");
    }
    uploader.on('uploadComplete', function(file) {
        console.log('uploadComplete')
        $('#' + file.id).find('.progress').fadeOut();
    });

    $("#submitFile").on('click', function() {
        console.log("准备提交")
        if ($(this).hasClass('disabled')) {
            console.log("无法提交")
            return false;
        }
        uploader.upload();

    });

function uploadFile() {
    // var uploadFile1 = $('#uploadFile').get(0).file[0];

    // console.log(uploadFile1)
    let file = fileSelector.files[0];
    var formdata = new FormData();

    formdata.append('file', file);
    formdata.append('path', "/我的文件");
    console.log("md5")
    $.ajax({
        url: '/disk/upload',
        type: 'post',
        dataType: 'json',
        data:formdata,
        processData: false,
        contentType: false,
        xhr: function () {
            var xhr = new XMLHttpRequest();
            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
            xhr.upload.addEventListener('progress', function (e) {
                console.log(e);
                //loaded代表上传了多少
                //total代表总数为多少
                var progressRate = (e.loaded / e.total) * 100 + '%';

                console.log(progressRate)
                //通过设置进度条的宽度达到效果
                $('#progressBar').css('width', progressRate);
            })

            return xhr;
        },
        success:function (res){
            console.log("成功",res);
        },
        error:function (e) {
            console.log("失败",e)
        }
    })
}
</script>
</html>